<template>
  <!--  <n-input v-model:value="pattern"  placeholder="请输入菜单名称搜索" />-->
  <n-tree class="slash-tree" style="max-height: 600px; min-height: 600px;overflow-y: scroll"
          block-line
          cascade
          draggable
          expand-on-dragenter
          default-expand-all
          selectable="true"
          :data="treeData"
          :node-props="nodeProps"
          key-field="id"
          :on-drop="onDrop"
          :render-prefix="renderPrefix"
          :render-suffix="renderSuffix"
          label-field="groupName"
          :default-expanded-keys="defaultExpandedKeys"
  />
</template>

<script lang="ts">
import { defineComponent, h, onMounted, ref } from "vue";
import { TreeOption } from "naive-ui";
import httpApi from "./httpApi";
import SlashAppContext from "@/context/SlashAppContext";
import { doDeleteModal, doSaveModal, doUpdateModal } from "./Service";


export default defineComponent(
  {
    components: {},
    emits: ["select"],
    setup(props, ctx) {
      const renderPrefix = (info: { option: Record<string, any> & TreeOption, checked?: boolean, selected?: boolean }) => {
        const { option } = info;
        return h("i", {
          class: `${option.children && option.children.length > 0 ? "ri-folder-5-fill" : "ri-folder-5-line"}`,
          style: {
            color: `#1e80ff`,
            marginRight: "0px"
          }
        });
      };
      const renderSuffix = (info: { option: Record<string, any> & TreeOption, checked?: boolean, selected?: boolean }) => {
        const { option } = info;
        return h("span", [
          h("i", {
            class: "ri-add-fill ",
            style: {
              marginRight: "5px",
              color: "#727070",
              fontSize: "20px"
            },
            onClick: (async (option: any) => {
              await doSaveModal(option);
              await reload();
            }).bind(null, option)
          }),
          h("i", {
              class: "ri-edit-line",
              style: {
                marginRight: "5px",
                fontSize: "16px",
                color: "#727070"

              },
              onClick: (async (option: any) => {
                await doUpdateModal(option);
                await reload();
              }).bind(null, option)
            }
          )
          , h("i", {
            class: "ri-delete-bin-7-line ",
            style: {
              marginRight: "5px",
              fontSize: "16px",
              color: "#727070"
            },
            onClick: (async (option: any) => {
              await doDeleteModal(option);
              await reload();
            }).bind(null, option)
          })
        ]);
      };
      const nodeProps = ({ option }: { option: TreeOption }) => {
        return {
          onClick() {
            ctx.emit("select", option);
          }
        };
      };
      const onDrop = async (data: { node: TreeOption, dragNode: TreeOption, dropPosition: "before" | "inside" | "after", event: DragEvent }) => {
        console.log("拖动", data);
        const { node, dragNode, dropPosition } = data;
        const updateData = {
          id: dragNode.id,
          position: dropPosition,
          targetId: node.id

        };
        await httpApi.doUpdateOrderIndex(updateData);
        await reload();
      };
      onMounted(() => {
        init();
      });
      const reload = async () => {
        await init();
      };
      const treeData = ref<any>([]);
      const init = async () => {
        const appCode = SlashAppContext.getRequest().appCode || "";
        const msg = await httpApi.selectTreeList({} as any);
        treeData.value = [
          {
            id: 0,
            groupName: "全部字典组",
            groupCode: "",
            children: [...msg.data]
          }
        ];
        console.log(treeData.value);
      };
      return {
        renderPrefix,
        renderSuffix,
        onDrop,
        treeData,
        nodeProps,
        defaultExpandedKeys: ref(["40", "41"])
      };
    }
  }
);


</script>

<style lang="less" scoped>

.slash-tree {

  ::v-deep(.n-tree-node) {
    .n-tree-node-content__suffix {
      visibility: hidden;
    }

    &:hover {
      .n-tree-node-content__suffix {
        visibility: visible;
      }
    }
  }

}
</style>
